<!--  -->
<template>
  <div ref="argisMap" class='argisMap'></div>
</template>

<script>
export default {
  props: {
    // 初始缩放级别
    initZoom: {
      type: Number,
      default: 6
    },
    // 初始中心点
    initCenter: {
      type: Array,
      default: () => [84.62, 41.53]
    },
  },
  components: {},
  data() {
    return {
      map: null,
      view: null
    };
  },
  computed: {},
  created() {
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap()
    })
  },
  methods: {
    initMap() {
      let that = this
      window.require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/WebTileLayer"
      ], (Map, MapView, WebTileLayer) => {
        // 创建地图
        var map = new Map({
          //basemap: "topo-vector" // 设置基础地图
        });

        // 创建地图视图
        var view = new MapView({
          container: this.$refs.argisMap, // 将视图附加到 div
          map: map,
          zoom: this.initZoom,
          center: this.initCenter,
        });

        // 创建天地图 WebTileLayer
        var tiandituLayer = new WebTileLayer({
          id: 'tiandituLayer',
          urlTemplate: "https://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&transparent=true&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=8c88eba266a165eac9c085724708f2f9",
        });

        // 将天地图图层添加到地图
        map.add(tiandituLayer);

        that.map = map
        that.view = view
        view.ui.remove('zoom') //清除放大缩小按钮
        view.ui.remove('attribution') //清楚底部powered by ESRI
        view.on('click', function (event) {
          view.hitTest(event.screenPoint).then((responses) => {
            if (responses.results.length > 0) {
              that.$emit("viewClick", responses)
            }
          })
        })

        view.when(() => {
          console.log("地图已加载");
          that.$emit("viewLoaded", that.map, that.view)
          view.popup.actions = []; // 隐藏所有按钮
          view.popup.dockOptions = { buttonEnabled: false }; // 隐藏切换按钮
        });
      });

    },

  },
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.argisMap {
  width: 100%;
  height: 100%;
}
</style>
<style scoped>
.argisMap>>>.esri-popup__navigation {
  display: none !important;
}
</style>